import { useState, useEffect, useRef } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
  Card,
  Form,
  Button,
  Input,
  InputNumber,
  message,
  Modal,
  Checkbox,
  Alert,
  Tooltip,
} from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import {  FormattedMessage, useIntl } from 'umi';
import request from '@/utils/request';
import QuerySelect from '@/components/QuerySelect';

const { confirm } = Modal;
const apiURL = '/api/services/app/JobHead/';

const ViewPage = (props: any) => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<any>({});
  const formRef = useRef<any>();
  const intl = useIntl();

  useEffect(() => {}, []);

  const onFinish = async (values: any) => {
    var resp = await request(apiURL + 'CheckJob', {
      method: 'POST',
      params: { jobNum: values.jobNum },
    });
    if (!resp.result) {
      confirm({
        title: intl.formatMessage({id:'pages.warning'}),
        icon: <ExclamationCircleOutlined />,
        content: intl.formatMessage({id:'pages.closeNoCompleteJob'}),
        onOk() {
          closeJob(values.id);
        },
      });
    } else {
      closeJob(values.id);
    }
    return;
  };

  const changeCmp = (e: any) => {
    var obj = formRef.current.getFieldsValue();
    if (!obj.id) {
      message.info(intl.formatMessage({id:'pages.select.jobNum'}));
      return;
    }
    closeJob(obj.id, 'CompleteJob');
  };

  const closeJob = (id: any, act: string = 'CloseJob') => {
    setLoading(true);
    request(apiURL + act, {
      method: 'POST',
      params: { id },
    }).then((response) => {
      if (response) {
        setLoading(false);
        if (response.success) {
          message.success(act === 'CloseJob' ? intl.formatMessage({id:'pages.jobClose.success'}) : intl.formatMessage({id:'pages.jobComplete.success'}));
        }
      }
    });
  };

  const getObj = (e: any) => {
    e.jobClosed = e.jobClosed == 'true';
    e.jobCompleted = e.jobCompleted == 'true';
    e.jobReleased = e.jobReleased == 'true';
    formRef.current.setFieldsValue(e);
    setData(e);
  };

  const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 10 },
  };

  return (
    <PageHeaderWrapper title={false} breadcrumbRender={false} ghost>
      <Card
        title={<FormattedMessage id="menu.manufacture.jobClose" />}        
        extra={
          <Alert
            message={<FormattedMessage id="pages.tips.jobClose" />}
            type="warning"
            showIcon
            closable
          />
        }
      >
        <Form {...layout} ref={formRef} onFinish={onFinish}>
          <Form.Item name="id" hidden>
            <Input disabled />
          </Form.Item>
          <Form.Item label={<FormattedMessage id="pages.jobNum" />} style={{ marginBottom: 0 }} required>
            <Input.Group compact>
              <Form.Item
                name="jobNum"
                rules={[
                  {
                    required: true,
                    message: <FormattedMessage id="pages.jobNum.required" />,
                  },
                ]}
              >
                <Input />
              </Form.Item>
              <Form.Item noStyle>
                <QuerySelect
                  width={780}
                  sysReportName="JobSearch"
                  text={<FormattedMessage id="pages.select" />}
                  title={<FormattedMessage id="pages.search" />}
                  btntype="primary"
                  setCurrent={(e: any) => getObj(e)}
                  scroll={{ x: 'max-content', y: '280px' }}
                  search={{
                    filterType: 'light',
                  }}
                />
              </Form.Item>
            </Input.Group>
          </Form.Item>
          <Form.Item name="partNum" label={<FormattedMessage id="pages.partNum" />}>
            <Input disabled />
          </Form.Item>
          <Form.Item name="partDescription" label={<FormattedMessage id="pages.partDescription" />}>
            <Input.TextArea disabled />
          </Form.Item>
          <Form.Item name="prodQty" label={<FormattedMessage id="pages.prodQty" />}>
            <InputNumber disabled />
          </Form.Item>
          <Form.Item name="dueDate" label={<FormattedMessage id="pages.requestDate" />}>
            <Input disabled />
          </Form.Item>
          <Form.Item name="jobCompleted" wrapperCol={{ offset: 5 }} valuePropName="checked">
            <Checkbox onChange={changeCmp} disabled={data.jobClosed}>
              <FormattedMessage id="pages.jobCompleted" />
            </Checkbox>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 5 }}>
            <Tooltip title={<FormattedMessage id="pages.warning.closedJob" />}>
              <Button
                danger
                type="primary"
                htmlType="submit"
                loading={loading}
                disabled={data.jobClosed}
              >
                <FormattedMessage id="pages.confirmClose" />
              </Button>
            </Tooltip>
          </Form.Item>
        </Form>
      </Card>
    </PageHeaderWrapper>
  );
};

export default ViewPage;
